<template>
  <div class="container">
    <!--对话框 start-->
    <div>
      <!--添加 start-->
      <el-dialog draggable v-model="dialogAddVisible" title="添加角色" width="35%" center>
        <el-form :inline="true" :model="addFormInfo" status-icon label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="addFormInfo.roleName" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input v-model="addFormInfo.roleDesc" placeholder="请输入介绍"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogAddVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureHandler">确定</el-button>
                </span>
        </template>
      </el-dialog>
      <!--添加 end-->
      <!--编辑 start-->
      <el-dialog draggable destroy-on-close v-model="dialogEditorVisible" title="编辑角色" width="35%" center>
        <el-form :inline="true" :model="editorFormInfo">
          <el-form-item label="名称">
            <el-input v-model="editorFormInfo.roleName" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input v-model="editorFormInfo.roleDesc" placeholder="请输入介绍"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogEditorVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureEditorHandler">确定</el-button>
                </span>
        </template>
      </el-dialog>
      <!--编辑 end-->
      <!--分配权限 start-->
      <el-dialog draggable destroy-on-close v-model="dialogPermissionVisible" title="分配权限" width="35%" center>
        <el-table ref="multipleTable" :data="allPermissions" row-key="roleId" @selection-change="onSelectionChange">
          <el-table-column type="selection" :reserve-selection="true"/>
          <el-table-column label="权限" prop="permissionName"/>
          <el-table-column label="详情" prop="permissionDesc"/>
        </el-table>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogPermissionVisible = false">取消</el-button>
                    <el-button type="primary" @click="surePermissionHandler">确定</el-button>
                </span>
        </template>
      </el-dialog>
      <!--分配权限 end-->
      <!--详情 start-->
      <el-dialog draggable destroy-on-close v-model="dialogDescVisible" title="角色详情" width="35%" center>
        <el-tag v-for="permission in descInfo.list" :key="permission.permissionId" size="large" effect="light"
                class="mx-1" round
                type="success">
          {{ permission.permissionName }}:[{{ permission.permissionDesc }}]
        </el-tag>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogDescVisible = false">关闭</el-button>
                </span>
        </template>
      </el-dialog>
      <!--详情 end-->
    </div>
    <!--对话框 end-->

    <!--顶部 start-->
    <div class="header" v-if="headerShow">
      <div class="search">
        <el-input class="input" size="large" v-model="searchInfo"
                  placeholder="请输入关键字"></el-input>
        <el-button icon="Search" size="large" color="#3c8dbc">搜索</el-button>
      </div>
    </div>
    <!--顶部 end-->

    <!--表格 start-->
    <div class="table-container">
      <div class="table-header">
        <div class="button-list">
          <el-button icon="DocumentAdd" type="success" @click="addHander">新增</el-button>
          <el-button icon="DocumentAdd" type="primary">导入</el-button>
          <el-button icon="DocumentAdd" type="warning">导出</el-button>
        </div>
        <div class="icon-list">
          <el-button icon="search" color="#3c8dbc" @click="headerShow?headerShow=false:headerShow=true"></el-button>
          <el-button icon="RefreshRight" color="#269846" @click="reload"></el-button>
          <el-button icon="ArrowLeftBold" color="#133c9a" @click="onClickLeft"></el-button>
        </div>
      </div>
      <el-table class="table" :data="dataList.list" highlight-current-row>
        <el-table-column prop="roleName" label="名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色详情"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleDesc(scope.$index, scope.row)">详情</el-button>
            <el-button size="small" type="danger" @click="handlePermission(scope.$index, scope.row)">分配权限
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          layout="prev,pager,next,jumper"
          :default-page-size="defaultPageSize"
          :total="totalData"
          @current-change="currentChangeHaddler"></el-pagination>
    </div>
    <!--表格 end-->

    <!--底部 start-->
    <div class="bottom">
      <span>© 2024 YueMu Copyrigh</span>
    </div>
    <!--底部 end-->
  </div>
</template>

<script setup>
import sysAxios from "@/api/sys.js"
import {onMounted, reactive, ref} from "vue";
//顶部显示
const headerShow = ref(true)
/**
 * 返回
 */
const onClickLeft = () => {
  history.back();
}
/**
 * 刷新页面
 */
const reload = () => {
  location.reload();
}
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  roleName: "",
  roleDesc: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  roleId: '',
  roleName: "",
  roleDesc: "",
})
//分配权限对话框控制器
const dialogPermissionVisible = ref(false)
//详情对话框控制器
const dialogDescVisible = ref(false)
//初始化详情对话框
const descInfo = reactive({
  list: []
})
//初始化角色列表
const allPermissions = ref([])
const rolePermissions = ref([])
const multipleTable = ref(null)
let permissionIds = []
const roleId = ref(0)
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  sysAxios.role_search({
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    }
  })
}
onMounted(() => {
  http()
})
/**
 * 分页
 */
const currentChangeHaddler = (val) => {
  currentPage.value = val
  http()
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  sysAxios.role_add({
    roleName: addFormInfo.roleName,
    roleDesc: addFormInfo.roleDesc,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http()
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true
  sysAxios.role_findById({
    roleId: row.roleId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.roleId = res.data.data.roleId;
      editorFormInfo.roleName = res.data.data.roleName;
      editorFormInfo.roleDesc = res.data.data.roleDesc;
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  sysAxios.role_update({
    roleId: editorFormInfo.roleId,
    roleName: editorFormInfo.roleName,
    roleDesc: editorFormInfo.roleDesc,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除此角色么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    sysAxios.role_delete({
      roleId: row.roleId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        http()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
/**
 * 分配权限对话框 弹出事件
 */
const handlePermission = (index, row) => {
  dialogPermissionVisible.value = true
  sysAxios.role_findById({
    roleId: row.roleId
  }).then(res => {
    if (res.data.code == 200) {
      rolePermissions.value = res.data.data.permissions
      roleId.value = res.data.data.roleId
    }
  })
  sysAxios.permission_findAll().then(res => {
    if (res.data.code == 200) {
      allPermissions.value = res.data.data
    }
  })


}
const onSelectionChange = (keys) => {
  permissionIds = []
  keys.map(item => {
    permissionIds.push(item.permissionId)
  })
}
/**
 * 分配角色对话框 确定事件
 */
const surePermissionHandler = () => {
  dialogPermissionVisible.value = false;
  sysAxios.role_updatePermission({
    roleId: roleId.value,
    permissionIds: permissionIds
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      http()
    }
  })

}
/**
 * 详情对话框弹出事件
 */
const handleDesc = (index, row) => {
  dialogDescVisible.value = true
  sysAxios.role_findById({
    roleId: row.roleId
  }).then(res => {
    if (res.data.code == 200) {
      descInfo.list = res.data.data.permissions
    }
  })

}

</script>
<style scoped lang="scss">
.container {
  padding-top: 20px;
  background-size: cover;
}

.header {
  background-color: #ffffff;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;

  .search {
    width: 100%;

    .input {
      width: 45%;
    }
  }

}

.table-container {
  background-color: #ffffff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  .table-header {
    display: flex;

    .button-list {
      color: #ffffff;
    }

    .icon-list {
      position: fixed;
      right: 30px;
    }
  }

  .table {
    margin: 10px;
    width: 97%;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 20px;
  background-color: #ffffff;
  width: 100%;
  padding: 10px;

  span {
    position: fixed;
    right: 20px;
    cursor: pointer;
  }
}

</style>
